import { pageInstructReceipt } from '@/services/api/api-instruct-receipt';
import { UserOutlined } from '@ant-design/icons';
import ProList from '@ant-design/pro-list';
import { ActionType } from '@ant-design/pro-table';
import { Avatar, Space, Tag, Typography } from 'antd';
import React, { useEffect, useRef } from 'react';
import { useAccess } from 'umi';

interface ListReceiptProps {
  recordId: string | undefined;
  type?: 1 | 2;
  createdCombineId?: string;
  reload?: boolean;
}

const ListReceipt: React.FC<ListReceiptProps> = ({ recordId, type, createdCombineId, reload }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    const response = await pageInstructReceipt({ recordId, type, createdCombineId, ...params });
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  useEffect(() => {

    actionRef.current?.reload();
  }, [reload]);
  useEffect(() => {
    actionRef.current?.reloadAndRest();
  }, [createdCombineId]);

  return (
    <ProList<InstructReceiptData.ReceiptPage>
      style={{
        marginTop: 10,
      }}
      headerTitle={'宣传指令'}
      ghost
      request={request}
      actionRef={actionRef}
      rowKey="id"
      dateFormatter="string"
      bordered
      search={false}
      sticky
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
        defaultPageSize: 20,
      }}
      metas={{
        title: {
          dataIndex: 'createdOrganizationName',
          render: (dom, entity) => {
            return (
              <Space size={0}>
                {/* <Tag color={entity.isOneself === 1 ?'#FF5500':'blue'}>{entity?.createdAccountName}</Tag> */}
                <Tag color={entity.type === 2 ? '#87d068' : '#1AA15F'}>
                  {entity.type === 2 ? '已回执' : '已阅读'}
                </Tag>
                <Avatar
                  size="small"
                  icon={<UserOutlined />}
                  src={entity.createdOrganizationAvatar}
                />
                <span
                  style={{
                    marginLeft: '5px',
                    marginRight: '5px',
                  }}
                >
                  {entity.createdOrganizationName}
                </span>
                -
                <span
                  style={{
                    marginLeft: '5px',
                  }}
                >
                  {entity.createdAccountName}
                </span>
              </Space>
            );
          },
        },
        description: {
          dataIndex: 'content',
          render: (dom, entity) => {
            return entity.content ? (
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{display:'flex'}}>
                  <span > 回执内容：</span>
                  <Typography.Paragraph
                    type="secondary"
                    ellipsis={{
                      rows: 3,
                      expandable: true,
                      onEllipsis: (ellipsis) => {
                        console.log('Ellipsis changed:', ellipsis);
                      },
                    }}
                    copyable
                    style={{ maxWidth: '45vw' }}
                  >
                    {entity.content}
                  </Typography.Paragraph>
                </div>
                <a style={{ minWidth: 100 }}>{entity.createdTime}</a>
              </div>
            ) : (
              <></>
            );
          },
        },
        // actions: {
        //   render(dom, entity, index, action, schema) {
        //     return <a>{entity.createdTime}</a>;
        //   },
        // },
      }}
      toolbar={{}}
      toolBarRender={false}
    />
  );
};

export default ListReceipt;
